---
title: 手動セットアップ
description: 既存のAstroプロジェクトにStarlightを追加するために、Starlightを手動で設定する方法を学びます。
---

import { Tabs, TabItem } from '@astrojs/starlight/components';

[入門](/ja/getting-started/#新しいプロジェクトの作成)で述べたように、新しいStarlightサイトを作成する最も簡単な方法は、`create astro`を使用することです。このガイドでは、既存のAstroプロジェクトにStarlightを追加する方法について説明します。

## Starlightをセットアップする

このガイドを進めるには、既存のAstroプロジェクトが必要です。

### Starlightインテグレーションの追加

Starlightは[Astroのインテグレーション](https://docs.astro.build/ja/guides/integrations-guide/)です。プロジェクトのルートディレクトリで`astro add`コマンドを実行してサイトに追加します。

<Tabs syncKey="pkg">
    <TabItem label="npm">
        ```sh
        npx astro add starlight
        ```

    </TabItem>
    <TabItem label="pnpm">
        ```sh
        pnpm astro add starlight
        ```
    </TabItem>
    <TabItem label="Yarn">
        ```sh
        yarn astro add starlight
        ```
    </TabItem>

</Tabs>

これにより、必要な依存関係がインストールされ、Astro設定ファイルの`integrations`配列にStarlightが追加されます。

### インテグレーションの設定

Starlightインテグレーションの設定は、`astro.config.mjs`ファイルでおこないます。

まずは`title`を追加してみましょう。

```js ins={8}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
	integrations: [
		starlight({
			title: '私の楽しいドキュメントサイト',
		}),
	],
});
```

他の利用可能なオプションについては、[Starlightの設定リファレンス](/ja/reference/configuration/)を参照してください。

### コンテンツコレクションの設定

StarlightはAstroの[コンテンツコレクション](https://docs.astro.build/ja/guides/content-collections/)の上に構築されています。この設定は`src/content/config.ts`ファイルでおこないます。

コンテンツの設定ファイルを作成または更新し、Starlightの`docsSchema`を使用する`docs`コレクションを追加します。

```js ins={3,6}
// src/content/config.ts
import { defineCollection } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
	docs: defineCollection({ schema: docsSchema() }),
};
```

### コンテンツの追加

以上でStarlightの設定は完了し、コンテンツを追加する準備が整いました！

`src/content/docs/`ディレクトリを作成し、`index.md`ファイルを追加します。これが新しいサイトのホームページになります。

```md
---
# src/content/docs/index.md
title: 私のドキュメント
description: Starlightで作成されたこのドキュメントサイトで、私のプロジェクトについてもっと学びましょう。
---

ようこそ私のプロジェクトへ！
```

Starlightはファイルベースのルーティングを使用してます。そのため、`src/content/docs/`にあるMarkdown、MDX、Markdocファイルはすべて、サイトのページへと変換されます。フロントマターのメタデータ（上記の例では`title`と`description`フィールド）により、各ページの表示方法を変更できます。利用可能なオプションについては、[フロントマターのリファレンス](/ja/reference/frontmatter/)を参照してください。

## 既存サイトのためのヒント

既存のAstroプロジェクトがある場合は、Starlightを使用して、サイトにドキュメントセクションを迅速に追加できます。

### サブパスへのStarlightの追加

Starlightのすべてのページをサブパスに追加するには、ドキュメントのコンテンツを`src/content/docs/`のサブディレクトリに配置します。

たとえば、Starlightのページがすべて`/guides/`で始まる場合は、コンテンツを`src/content/docs/guides/`ディレクトリに追加します。

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- src/
  - content/
    - docs/
      - **guides/**
        - guide.md
        - index.md
  - pages/
- astro.config.mjs

</FileTree>

将来的には、`src/content/docs/`内にネストされたディレクトリを必要としないよう、このユースケースに対するサポートを改善する予定です。

### StarlightとSSR

SSRを有効にするには、Astroドキュメントの「[オンデマンドレンダリングアダプター](https://docs.astro.build/ja/guides/server-side-rendering/)」ガイドに従い、Starlightプロジェクトにサーバーアダプターを追加します。

Starlightによって生成されるドキュメントページは、プロジェクトの出力モードに関係なくデフォルトでプリレンダリングされます。Starlightページのプリレンダリングを無効にするには、[`prerender`設定オプション](/ja/reference/configuration/#prerender)を`false`に設定します。
